<template>
  <div class="rcentlySearch">
    <div class="no1">
      <div>热门搜索</div>
      <div style="color: #999b9c" @click="aaa">{{ a.text }}</div>
    </div>

    <div class="box" v-show="a.y1">
      <div class="item" v-for="item in hotList">
        <span>{{ item }}</span>
      </div>
    </div>
    <div class="box1" v-show="!a.y1">
      <span>已隐藏搜索发现</span>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { getSearchHot } from '@/api'

// 热门搜索 数组
const hotList = ref<string[]>([])
// 请求
async function get() {
  const a = await getSearchHot()
  hotList.value = a.owner
}
get()

const a = ref({
  y1: true,
  text: '隐藏'
})

function aaa() {
  a.value.y1 = !a.value.y1
  if (a.value.y1) {
    a.value.text = '隐藏'
  } else {
    a.value.text = '显示'
  }

  // console.log(a.value)
}
</script>

<style scoped>
.rcentlySearch {
  padding-left: 13px;
  margin-top: 15px;
}
.no1 {
  display: flex;
  justify-content: space-between;
  font-size: 15px;
  color: #232326;
  padding: 0 15px 11px 0;
}
.box {
  display: flex;
  flex-wrap: wrap;
}
.box1 {
  text-align: center;
  line-height: 164px;
  font-size: 14px;
  color: #999;
}
.item {
  height: 23px;
  background-color: #f0f2f5;
  color: #686868;
  font-size: 14px;
  line-height: 23px;
  text-align: center;
  border-radius: 3px;
  padding: 0px 13px 0 13px;
  box-sizing: border-box;
  margin: 0px 10px 10px 0;
}
</style>
